<template>
	<view>
		<!-- <cmd-nav-bar back title="信息设置"></cmd-nav-bar> -->
		<cmd-page-body type="body">
			<cmd-transition name="fade-up">
				<view>

					<!-- 修改弹框 -->
					<cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>
					<!-- 用户信息 -->
					<cmd-cel-item title="头像" slot-right arrow>
						<cmd-avatar :src="user.headerUrl"></cmd-avatar>
					</cmd-cel-item>
					<cmd-cel-item title="用户ID" :addon="user.id" arrow @click="fnClick('userid')"></cmd-cel-item>
					<cmd-cel-item title="姓名" :addon="user.username" arrow @click="fnClick('username')"></cmd-cel-item>
					<cmd-cel-item title="邮箱" :addon="user.email" arrow @click="fnClick('email')"></cmd-cel-item>
					
					<cmd-cel-item title="修改密码" @click="fnClick('modify')" arrow></cmd-cel-item>



					<!-- <button @click="showDialogBoxInput"
						style="width: 160px; height: 50px;background-color: antiquewhite; margin-top: 26px;">显示输入弹框</button> -->
					<!-- <button class="btn-logout" @click="showInputDialog">保存修改</button> -->
				</view>


			</cmd-transition>
		</cmd-page-body>


	</view>
</template>

<script>
	import cmdNavBar from "@/components/PersonPage/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/PersonPage/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/PersonPage/cmd-transition/cmd-transition.vue"
	import cmdCelItem from "@/components/PersonPage/cmd-cell-item/cmd-cell-item.vue"
	import cmdAvatar from "@/components/PersonPage/cmd-avatar/cmd-avatar.vue"
	import ccDefineDialogBox from "@/components/PersonPage/cc-defineDialogBox/cc-defineDialogBox.vue"

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdCelItem,
			cmdAvatar,
			ccDefineDialogBox
		},

		data() {
			return {
				value: '',
				user: {
					activationCode: null,
					createTime: "2023-10-21T13:37:25.000+0000",
					email: null,
					headerUrl: "http://images.nowcoder.com/head/193t.png",
					id: 1112,
					password: "",
					salt: "",
					status: 1,
					type: 0,
					username: "班马JBCW45226",
					wechatOpenId: "oyey14uGJ1o_Jhrsa0TtCNjbNdqc"
				}
			};
		},
		onLoad() {
			this.getIfnfo()
		},

		mounted() {},

		methods: {
			/**
			 * 点击触发
			 * @param {Object} type 跳转页面名或者类型方式
			 */
			fnClick(type) {
				if (type == 'username') {
					this.showDialogBoxInput("姓名","username")
					// this.user.username = this.value
				}
				if (type == 'email') {
					this.showDialogBoxInput("邮箱","email")
					// this.user.email = this.value
				}
			},
			getIfnfo() {
				this.$http({
					url: '/api/user/profile/' + uni.getStorageSync("userId"),
					method: 'GET',
					data: {},
					header: {
						'ticket': uni.getStorageSync('ticket')
					}
				}).then(res => {
					console.log(res)
					this.$data.user = res.data.data.user
				})
			},
			showDialogBoxInput(type,value) {
				const self = this;
				this.$refs['DialogBox'].confirm({
					title: '更改'+type,
					placeholder: '请输入修改的'+type,
					value: self.user[value],
					DialogType: 'input',
					animation: 0
				}).then((res) => {
					self.user[value] = res.value
				})
			}
		}
	}
</script>

<style>
	.btn-logout {
		margin-top: 100upx;
		width: 80%;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.btn-logout-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}
</style>